<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="70%"
  >
    <div class="contentBox" :style="'height:' + (windowHeight - 200) + 'px'">
      <el-scrollbar class="page-component__scroll">
        <div class="orderBox">
          <div class="infoBox">
            <div class="infoDetail">
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>会议订单编号：{{ orderData.orderNumber }}</div></el-col
                >
                <el-col :span="6"
                  ><div>
                    订单状态：{{ formatStatus(orderData.orderStatus) }}
                  </div></el-col
                >
                <el-col :span="8"
                  ><div>
                    <el-button
                      type="success"
                      size="small"
                      @click="doDelete()"
                      v-if="orderData.orderStatus == 2"
                      >接单</el-button
                    >
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="infoTitle">
              <span>租赁公司</span>
            </div>
            <div class="infoDetail">
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>公司名称：{{ orderData.companyName }}</div></el-col
                >
                <el-col :span="6"
                  ><div>联系人：{{ orderData.linkMan }}</div></el-col
                >
                <el-col :span="8"
                  ><div>联系方式：{{ orderData.linkPhone }}</div></el-col
                >
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>
                    统一社会信用代码：{{ orderData.companyCode }}
                  </div></el-col
                >
                <el-col :span="6"
                  ><div>法人：{{ orderData.legalMan }}</div></el-col
                >
                <el-col :span="8"
                  ><div>
                    法人联系方式：{{ orderData.legalManPhone }}
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="infoTitle">
              <span>会议室基础信息</span>
            </div>
            <div class="infoDetail">
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>位置：{{ orderData.address }}</div></el-col
                >
                <el-col :span="6"
                  ><div>楼层：{{ orderData.floor }}层</div></el-col
                >
                <el-col :span="8"
                  ><div>面积：{{ orderData.area }} ㎡</div></el-col
                >
              </el-row>
            </div>

            <div class="infoTitle">
              <span>会议时间</span>
              <span class="rightTxt"
                >小计：<span class="redTxt">{{
                  orderData.rentMoney / 100
                }}</span
                >元</span
              >
            </div>
            <div class="infoDetail">
              <el-row
                :gutter="20"
                v-for="(item, index) in orderData.meetOrderTimeList"
                :key="index"
              >
                <div>
                  <el-col :span="8">
                    <div>会议日期：{{ item.meetingDate }}</div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      会议时段：{{ formatTimeFrame(item.meetingTimeFrame) }}
                    </div>
                  </el-col>
                </div>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>历时：{{ orderData.dateCountNumber }}天</div></el-col
                >
                <el-col :span="6"
                  ><div>价格：{{ orderData.dateCountPrice }}元</div></el-col
                >
              </el-row>
            </div>
            <div class="infoTitle">
              <span
                >辅助设备<el-tooltip
                  class="item"
                  effect="dark"
                  content="如不选择，则不提供以下设备"
                  placement="top"
                  style="margin-left: 5px"
                >
                  <i class="el-icon-info"></i> </el-tooltip
              ></span>
              <!-- <span class="rightTxt">小计：<span class="redTxt">{{deviceCountNumber}}</span>元</span> -->
            </div>
            <div class="infoDetail">
              <el-row :gutter="20">
                <el-col :span="24"
                  ><div>
                    <span
                      v-for="(item, index) in orderData.helpFacilityList"
                      :key="index"
                      class="serviceCheckBox"
                      >{{ item.name }}</span
                    >
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="infoTitle">
              <span
                >辅助服务<el-tooltip
                  class="item"
                  effect="dark"
                  content="如不选择，则不提供以下服务"
                  placement="top"
                  style="margin-left: 5px"
                >
                  <i class="el-icon-info"></i> </el-tooltip
              ></span>
              <span class="rightTxt"
                >小计：<span class="redTxt">{{
                  orderData.helpServeMoney / 100
                }}</span
                >元</span
              >
            </div>
            <div class="infoDetail">
              <el-row :gutter="20">
                <el-col :span="24"
                  ><div>
                    <span
                      v-for="(item, index) in orderData.helpServeList"
                      :key="index"
                      class="serviceCheckBox"
                      >{{ item.name }} {{ item.price / 100 }}元/{{
                        item.units
                      }}
                      数量：{{ item.count }}
                    </span>
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="infoTitle">
              <span>会议室租赁保证金</span>
              <span class="rightTxt"
                >小计：<span class="redTxt">{{
                  orderData.earnestMoney / 100
                }}</span
                >元</span
              >
            </div>
            <div class="countNum">
              <span>应付金额（元）：</span>
              <span class="bigTxt">{{ orderData.amount / 100 }}</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>
<script>
import * as meeting from "@/api/meeting/meeting.js";
export default {
  props: {
    visible: {
      typeof: Boolean,
      default: false,
    },
    id: {
      typeof: String,
      default: "",
    },
  },
  watch: {
    id: {
      immediate: true,
      handler(value) {
        console.log(value);
        if (this.visible) {
          this.findMeetOrderAdminDetail();
        }
      },
    },
    visible(val) {
      if (val) {
        this.dialogVisible = val;
      }
    },
    windowHeight(val) {
      let that = this;
      // console.log("实时屏幕高度：", val, that.windowHeight);
    },
  },
  data() {
    return {
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      dialogVisible: false,
      orderData: {
        amount: 420600,
        companyCode: "0001",
        companyId: 1,
        companyName: "公园公司",
        earnestMoney: 100000,
        helpFacilityList: [],
        helpServeList: [],
        helpServeMoney: 10600,
        id: 17,
        legalMan: "强总",
        legalManPhone: "18888888888",
        linkMan: "彭先生",
        linkPhone: "15826145315",
        meetOrderTimeList: [],
        orderNumber: "H2021042215400578344",
        orderStatus: 1,
        orderTakeId: null,
        orderTakenTime: null,
        plcMeetinRoomId: 1,
        rentMoney: 270000,
        tenantId: 1,
        dateCountNumber: 0,
        dateCountPrice: 0,
      },
      dialogTitle: "订单详情",
      timeArr: [
        {
          label: "上午09:00-12:00",
          value: 1,
          disabled: false,
        },
        {
          label: "下午14:00-18:00",
          value: 2,
          disabled: false,
        },
        {
          label: "全天09:00-18:00",
          value: 3,
          disabled: false,
        },
      ],
      statusList: [
        {
          dictValue: 1,
          dictName: "待接单",
        },
        {
          dictValue: 2,
          dictName: "已接单",
        },
        {
          dictValue: 3,
          dictName: "已完成",
        },
      ],
    };
  },

  created() {},
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.windowHeight = window.fullHeight; // 高
      })();
    };
    // console.log(this.id);
    // this.findMeetOrderAdminDetail()
  },
  methods: {
    doDelete() {
      this.$confirm("请确认是否接单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: this.id,
          };
          meeting
            .takeMeetOrderAdmin(data)
            .then((res) => {
              this.$message({
                type: "success",
                message: "接单成功!",
              });
              this.findMeetOrderAdminDetail()
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消接单",
          });
        });
    },
    handleClose(done) {
      this.$emit("on-close");
      done();
    },
    close() {
      this.$emit("on-close");
      this.dialogVisible = false;
    },
    findMeetOrderAdminDetail() {
      let that = this;
      let data = {
        id: this.id,
      };
      meeting
        .findMeetOrderAdminDetail(data)
        .then((res) => {
          console.log(res);
          that.orderData = res.data.data;
          let tempList = res.data.data.meetOrderTimeList;
          let dayCount = 0;
          let priceCount = 0;
          for (let i = 0; i < tempList.length; i++) {
            if (tempList[i].meetingTimeFrame == 3) {
              dayCount += 1;
              priceCount += 1500;
            } else {
              dayCount += 0.5;
              priceCount += 800;
            }
          }
          this.orderData.dateCountNumber = dayCount;
          this.orderData.dateCountPrice = priceCount;
        })
        .catch((err) => {});
    },
    formatStatus(cellValue) {
      if (cellValue) {
        let _types = this.statusList || [];
        let _obj =
          _types.find((value, index) => {
            return value.dictValue === cellValue;
          }) || {};
        return _obj.dictName || "";
      } else {
        return "/";
      }
    },
    formatTimeFrame(cellValue) {
      if (cellValue) {
        let _types = this.timeArr || [];
        let _obj =
          _types.find((value, index) => {
            return value.value === cellValue;
          }) || {};
        return _obj.label || "";
      } else {
        return "/";
      }
    },
  },
};
</script>
<style scoped>
.orderBox {
}
.pageTitle {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.infoBox {
  margin: 0 auto;
  text-align: left;
}
.title {
  font-size: 20px;
  /* text-align: center; */
  line-height: 50px;
  padding: 0 20px;
  color: #66b1ff;
  font-weight: bold;
}
.infoTitle {
  padding: 0 20px;
  background: #c4c4c4;
  line-height: 40px;
  color: #262424;
}
.infoTitle span.rightTxt {
  float: right;
  font-size: 14px;
}
.infoTitle span.rightTxt .redTxt {
  color: #ff4c4c;
  padding: 0 5px;
}
.infoDetail {
  padding: 15px 20px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}

.countNum {
  line-height: 50px;
  padding: 0 15px;
  background: #e7e6e6;
  color: red;
  text-align: right;
}
.countNum span.bigTxt {
  font-size: 1.1em;
}
.serviceCheckBox {
  margin-right: 30px;
}
.submitBox {
  width: 1068px;
  margin: 0 auto;
  text-align: right;
  margin-top: 50px;
}
.page-component__scroll {
  height: 100%;
}
.page-component__scroll >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

